/***
  补充全局公共样式
  PS：若不满足开发需求可自行添加样式
 */


// ***********************容器部分开始***********************

// 文章
.article {
  &-title {
    font-weight: 500;
    font-size: 32px;
    line-height: 1;
    text-align: center;
    width: 90%;
    margin: 20px auto 10px auto;
    color: #010101;
  }

  &-subtitle {
    font-size: 30px;
    color: #646464;
    line-height: 1;
    margin-bottom: 20px;
    width: 100%;
    text-align: center;
  }

  & > p {
    text-justify: auto;
    text-align: justify;
    text-indent: 2em;
    padding: 0px 10px;
    font-size: 26px;
    line-height: 1.7;
    color: #4B4B4B;
  }
}

// 模块盒子
.box {
  box-sizing: border-box;
  border-radius: 20px;
  width: 100%;
  padding: 30px;
}

// 带标题栏的卡片
.card {
  background-color: #fff;

  &-bar {
    margin: 20px 0;
    position: relative;

    &-title {
      font-weight: bold;
      text-indent: 4%;
    }

    &-title:before {
      content: '';
      display: inline-block;
      position: absolute;
      left: 0;
      width: 5px;
      height: 100%;
      border: 1px solid #D58913;
      border-radius: 2px;
      background-color: #D58913;
    }

    &-extra {
      position: absolute;
      display: inline-block;
      vertical-align: middle;
      right: 0px;
      width: 50%;
      height: 100%;
    }
  }

  &-desc {
    font-size: 28px;
    color: #727171;
    padding: 0px 20px 20px;
  }

  &-container {}
}

// ***********************容器部分结束***********************

// ***********************字体部分开始***********************
//@font-face {
//  font-family: 'pingFang';
//  src: url('./icons/PingFang-Jian-ChangGuiTi.ttf');
//}
// ***********************字体部分结束***********************

// ***********************颜色部分开始***********************
.green {
  color: #189a00 !important;
}

.light-green {
  color: #BDF2A2 !important;
}

.yellow {
  color: #FFEE00 !important;
}

.blue {
  color: #0055ff !important;
}

.dark-blue {
  color: #0d369f !important;
}

.soft-blue {
  color: #5FA1D9 !important;
}

.red {
  color: #D10000 !important;
}

.grey {
  color: #bcbcbc !important;
}

.gray {
  color: #888 !important;
}

.black {
  color: #2d2d2d !important;
}

// ***********************颜色部分结束***********************

// ***********************标准模块样式部分开始***********************

// Flex居中
.mid {
  display: flex;
  align-items: center;
}

// 边框
.border {
  border-radius: 5px;
  border: 1px solid #ffffff5c;
}

// ***********************标准模块样式部分结束***********************

// ***********************文字部分开始***********************

// 文字省略
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 文字加粗
.bold {
  font-weight: bold !important;
}

// 左对齐
.t-l {
  text-align: left !important;
}

// 居中
.t-c {
  text-align: center !important;
}

// 右对齐
.t-r {
  text-align: right !important;
}

// ***********************文字部分结束***********************

// ***********************布局部分开始***********************
.inline-block {
  display: inline-block;
}

// ***********************布局部分结束***********************

// ***********************内边距部分开始***********************
.clear-p {
  padding: 0px !important;
}

.padding {
  padding: 10px !important;
}

.padding-s {
  padding: 5px !important;
}

.padding-lr {
  padding: 0px 10px !important;
}

.padding-l {
  padding-left: 10px !important;
}

// ***********************内边距部分结束***********************

// ***********************外边距部分开始***********************
.clear-m {
  margin: 0px !important;
}

.margin-auto {
  margin: auto;
}

.margin-l-auto {
  margin-left: auto;
}

.margin-r-auto {
  margin-right: auto;
}

.margin {
  margin: 10px !important;
}

.margin-lr {
  margin: 0px 10px !important;
}

.mt5 {
  margin-top: 5px;
}

.mt10 {
  margin-top: 10px;
}

.mt15 {
  margin-top: 15px;
}

.mt20 {
  margin-top: 20px;
}

.mt30 {
  margin-top: 30px;
}

.mt40 {
  margin-top: 40px;
}

.mt50 {
  margin-top: 50px;
}

.mb5 {
  margin-bottom: 5px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb15 {
  margin-bottom: 15px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb25 {
  margin-bottom: 25px;
}

.mb30 {
  margin-bottom: 30px;
}

.mb40 {
  margin-bottom: 40px;
}

.mb50 {
  margin-bottom: 50px;
}

.mr5 {
  margin-right: 5px;
}

.mr10 {
  margin-right: 10px;
}

.mr15 {
  margin-right: 15px;
}

.mr20 {
  margin-right: 20px;
}

// ***********************外边距部分结束***********************

// ***********************宽高部分开始***********************

.h100 {
  height: 100% !important;
}

.h50 {
  height: 50% !important;
}

.h45 {
  height: 45% !important;
}

.w10 {
  width: 10% !important;
}

.w20 {
  width: 20% !important;
}

.w30 {
  width: 30% !important;
}

.w40 {
  width: 40% !important;
}

.w50 {
  width: 50% !important;
}

.w60 {
  width: 60% !important;
}

.w70 {
  width: 70% !important;
}

.w80 {
  width: 80% !important;
}

.w90 {
  width: 90% !important;
}

.w100 {
  width: 100% !important;
}

// ***********************宽高部分结束***********************
